<template>
    <div class="header">
        <ul class="header-nav">
            <li class="nav-tit" :class="{'current': current == 'HSR'}">
                <!-- <router-link  :to="{ name: 'default'}">Hasher Explorer</router-link> -->
                <a @click="gotoTag(headerData,0)">Hshare Explorer </a>
            </li>
            <li class="nav-tit" :class="{'current': current == item.shortName}" v-for="(item,index) in explore">
                <!-- <router-link :to="{ name: 'explore', params: {type:item.shortName} }">{{item.name}} Explorer</router-link> -->
                <a @click="gotoTag(item)">{{item.name}} Explorer</a>

            </li>

        </ul>
    </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';
import hrsImg from '../../images/hsr.png';
export default {
    name: 'header',
    data(){
        return{
            msg:'header',
            explore:'',
            current:'',
            headerData:{
                shortName   :'HSR',
                colorId     :'',
                logoUrl     :hrsImg
            }
        }
    },
    computed:{
        ...mapGetters(['G_SELECT_DATA']),
    },
    created(){
        // 刷新过后判断是否存在上一次的colorId
        if(this.G_SELECT_DATA && this.G_SELECT_DATA.shortName){
            this.current = this.G_SELECT_DATA.shortName;
        }else{
            this.A_SELECT_DATA(this.headerData);
            this.current = this.headerData.shortName;
        }
        this.getData();
    },
    methods:{
        ...mapActions(['A_SELECT_DATA']),
        // 查询已发行的彩色币
        getData(){
            this.$http({
                url     : 'explorer/colorcoins/api/v1/colorcoins',
                method  : 'get'
            }).then((res)=>{
                let data = res.data;
                if(data.responseCode === 1){
                    let list = data.responseData;
                    this.explore = list;
                }
            })
        },

        gotoTag(item){
            this.current = item.shortName;
            this.A_SELECT_DATA(item);//存选中的数据
            // 跳转到浏览器查询页面
            this.$router.push({name:'explore',params:{currency:item.shortName}});
        }
    }
}
</script>

<style>

</style>
